<mat-card>
  <h3 class="title">通配符 <span>* => open | * => closed</span></h3>
  <button mat-raised-button (click)="toggle()">{{isOpen?'closed':'open'}}</button>
  <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container"></div>


  <h3 class="title">入场和出场 <span>:enter | :leave</span></h3>
  <button mat-raised-button (click)="isShown = !isShown">{{isShown?'离场':'进场'}}</button>
  <div class="box" @insertRemove *ngIf="isShown"></div>
</mat-card>

<mat-card>
  <h3 class="title">数值增加或减小时的转场 <span>:increment | :decrement</span></h3>

  <button mat-raised-button (click)="previous()" class="btn btn-default">Previous</button>
  <button mat-raised-button (click)="next()" class="btn btn-default">Next</button>
  <div [@slider]="selectedIndex" class="slider-container" style="margin: 20px 10px;">
      <!-- <div class="slide" *ngFor="let image of images"> <img [src]="image" /> </div> -->
      <!-- 上面或者下面的方法均可,原理是使用 animatin 中的 group -->
      <div class="slide" *ngIf="selectedIndex === 0"> <img src="https://via.placeholder.com/400x400?text=Hello" /> </div>
      <div class="slide" *ngIf="selectedIndex === 1"> <img src="https://via.placeholder.com/400x400?text=Angular" /> </div>
      <div class="slide" *ngIf="selectedIndex === 2"> <img src="https://via.placeholder.com/400x400?text=Animations" /> </div>
  </div>
  <p>使用到了 <span>query() 和 stagger() 方法</span>, 动画目标应该绑定在父级元素,切其子后代的内容在变化。因为动画中使用到了 <span>:enter | :leave</span> <a href="https://stackblitz.com/edit/angular5-slider?file=app%2Fslider%2Fslider.component.ts" target="_blank">点击查看</a></p>
</mat-card>

<mat-card>
  <h3 class="title">关键帧动画 <span>keyframes</span></h3>
  <button mat-raised-button (click)="isActive = !isActive">转换</button>

  <div class="box" [@mykeyframes]="isActive ? 'open' : 'closed'"></div>
</mat-card>
  